.w-badge-wrap {
  position: relative;
  display: inline-flex;
}

.w-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  border-radius: 9em;
  // Always get an even number for better text vertical align.
  height: round(1.1 * $base-font-size / 2) * 2;
  min-width: round(1.1 * $base-font-size / 2) * 2;
  z-index: 1;
  padding: 0 $base-increment;

  &--inline {
    position: static;
  }

  &--round {
    width: round(1.1 * $base-font-size / 2) * 2;
    padding: 0 (round(1.1 * $base-font-size / 4) * 2);
  }

  // Sizes.
  &.size--xs {
    // Always get an even number for better text vertical alignment.
    $height: round($base-font-size / 2) * 2;
    font-size: round(0.67 * $base-font-size / 2) * 2;
    height: $height;
    min-width: $height;

    &--round {
      width: $height;
      padding: 0 round($height / 2);
    }
  }
  &.size--sm {
    font-size: round(0.75 * $base-font-size / 2) * 2;
    height: round(1.1 * $base-font-size / 2) * 2;
    min-width: round(1.1 * $base-font-size / 2) * 2;
  }
  &.size--md {
    font-size: round(0.9 * $base-font-size / 2) * 2;
    height: round(1.3 * $base-font-size / 2) * 2;
    min-width: round(1.3 * $base-font-size / 2) * 2;
  }
  &.size--lg {
    font-size: round(1.05 * $base-font-size / 2) * 2;
    height: round(1.5 * $base-font-size / 2) * 2;
    min-width: round(1.5 * $base-font-size / 2) * 2;
  }
  &.size--xl {
    font-size: round(1.2 * $base-font-size / 2) * 2;
    height: round(1.8 * $base-font-size / 2) * 2;
    min-width: round(1.8 * $base-font-size / 2) * 2;
  }

  // Position.
  &--top {
    top: 0;
  }
  &--bottom {
    bottom: 0;
  }
  &--left {
    right: 100%;
  }
  &--right {
    left: 100%;
  }
  &--overlap {
    &.w-badge--top {
      margin-top: -1 * $base-increment;
    }
    &.w-badge--bottom {
      margin-bottom: -1 * $base-increment;
    }
    &.w-badge--left {
      margin-right: -3 * $base-increment;
    }
    &.w-badge--right {
      margin-left: -3 * $base-increment;
    }
    &.w-badge--top.size--xs {
      margin-top: round(-0.5 * $base-increment);
    }
    &.w-badge--bottom.size--xs {
      margin-bottom: round(-0.5 * $base-increment);
    }
    &.w-badge--top.size--sm {
      margin-top: round(-0.75 * $base-increment);
    }
    &.w-badge--bottom.size--sm {
      margin-bottom: round(-0.75 * $base-increment);
    }
    &.w-badge--top.size--lg {
      margin-top: round(-1.5 * $base-increment);
    }
    &.w-badge--bottom.size--lg {
      margin-bottom: round(-1.5 * $base-increment);
    }
    &.w-badge--top.size--xl {
      margin-top: -2 * $base-increment;
    }
    &.w-badge--bottom.size--xl {
      margin-bottom: -2 * $base-increment;
    }
  }

  // Look modifiers.
  &--dark {
    color: rgba(255, 255, 255, 0.95);
  }
  &--outline {
    background-color: transparent;
    border-color: currentColor;
  }
  &--shadow {
    box-shadow: $box-shadow;
  }

  &--dot.w-badge {
    min-width: 0;
    padding: 0;
  }
  &--dot.size--xs {
    width: round(1.35 * $base-increment);
    height: round(1.35 * $base-increment);
  }
  &--dot.size--sm {
    width: round(1.7 * $base-increment);
    height: round(1.7 * $base-increment);
  }
  &--dot.size--md {
    width: round(2.2 * $base-increment);
    height: round(2.2 * $base-increment);
  }
  &--dot.size--lg {
    width: round(2.75 * $base-increment);
    height: round(2.75 * $base-increment);
  }
  &--dot.size--xl {
    width: 3 * $base-increment;
    height: 3 * $base-increment;
  }
}
